<template>
<div>
  <div>
    <el-button @click="add" type="success" :disabled="btn1">点击抽奖</el-button>
    <div v-if="type==2">
      <div v-if="raffle.status>6" style="color: red">
        <img src="https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180227/3f76b3df8aca41aa85d464a47aaa1734.gif">
        {{raffle.reward}}
      </div>
      <div v-else style="color: green;font-size: 30px">
        <img src="https://p3.itc.cn/q_70/images03/20200718/b40f352172904ef49b63b58d70c9e5eb.gif">
        {{raffle.reward}}
      </div>
    </div>
    <div v-else>
      <h1 style="color: #535bf2">{{msg}}</h1>
    </div>
  </div>
  <div>
    <el-table
        :data="raffles"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="reward"
          label="抽奖结果">
      </el-table-column>
      <el-table-column
          prop="ctime"
          label="抽奖日期">
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import { useStore } from 'vuex'
import axios from "axios";

const raffles=new ref([]);
const store=useStore();
const raffle = new ref({});
const type=ref(1);
const msg=ref("还没开始！")
const btn1=new ref(false)
onMounted(()=>{

  //请求接口 获取抽奖记录
  loadData();
  //请求接口 校验今日是否可以抽奖
  axios.get("/raffle/check?token="+store.state.token).then(res=>{
    if(res.data.code==0){
      btn1.value=false;
      msg.value="快来抽奖啦";

    }else {
      btn1.value=true;
      msg.value="亲，今日已经完成抽奖，请明天再来！";
    }
  })
})

const loadData=()=>{
  //请求 抽奖记录接口 查询当前登录用户的抽奖记录
  axios.get("raffle/my?token="+store.state.token).then(res=>{
    if(res.data.code==0){
      raffles.value=res.data.data;
    }else{
      alert(res.data.data);
    }
  });
}
const add = () => {
  //请求接口 实现抽奖
  axios.get("raffle/save?token="+store.state.token).then(res=>{
    if(res.data.code==0){
      type.value=2;
      raffle.value=res.data.data;
      btn1.value=true;
      loadData();
    }else{
      msg.value=res.data.data;
      alert(res.data.data);
    }
  });
}
</script>

<style scoped>

</style>
